<template>
  <div class="pay-order">
    <div class="pay">
      <div class="td-fc">
        <span>订单提交成功，请付款！</span>
        <span class="order-num">订单号: {{order_id}}</span>
      </div>
      <div>
        <div>需支付：</div>
        <div>¥{{pay_price}}</div>
      </div>
    </div>
    <div class="pay-try">
      <div class="san"></div>
      <div class="weixin zhifubao" v-show="pay_type === 'zhifubao'">
        <div class="ty">支付宝支付</div>
        <div class="le">
          <div class="tit">{{pay_tips}}</div>
          <div class="pay-detail">
            <div class="pay-left">
              <div class="pay-qrcode pay-wait-box td-fcc td-fc">
                <img class="pay-wait" :src="$global.Image.icon_wait" />
                <span class="pay-wait-text">正在跳转支付宝...</span>
              </div>
              <div class="pay-tips td-fcc">
                <img :src="$global.Image.icon_ocr" />
                <div class="td-fas td-fc">
                  <span>请使用支付宝扫一扫</span>
                  <span>扫描二维码支付</span>
                </div>
              </div>
            </div>
            <img class="pay-right" :src="$global.Image.img_alipay_tips" />
          </div>
        </div>
      </div>
      <div class="zhifubao" v-show="pay_type === 'yue'">
        <div class="ty">余额支付</div>
      </div>
      <div class="weixin" v-show="pay_type === 'weixin'">
        <div class="ty">微信支付</div>
        <div class="le">
          <div class="tit">{{pay_tips}}</div>
          <div class="pay-detail">
            <div class="pay-left">
              <div class="pay-qrcode" ref="payQrcode"></div>
              <div class="pay-tips td-fcc">
                <img :src="$global.Image.icon_ocr" />
                <div class="td-fas td-fc">
                  <span>请使用微信扫一扫</span>
                  <span>扫描二维码支付</span>
                </div>
              </div>
            </div>
            <img class="pay-right" :src="$global.Image.img_weixinpay_tips" />
          </div>
        </div>
      </div>
    </div>
<!--    暂时隐藏-->
    <div class="try">
      <div>其他支付方式：</div>
      <div class="td-fsc">
        <div
          class="pay-item td-fcc"
          v-for="(item,index) in payArr"
          :key="index"
          v-if="item.value != pay_type"
          @click="payOrderHandle(item.value)"
        >
          <img :src="$global.Image[item.icon]" />
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
    <div class="alipay-box" ref="aliPayBox"></div>
  </div>
</template>

<script>
import { orderDetail, orderAgain, orderPayState } from "@api/order";
import { payOrder } from "@api/order";
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      orderType: "",
      order_id: "",
      pay_price: 0,
      pay_type: "",
      qrcode_text: "",
      orderInfo: "",
      from: "frompc",
      pay_tips: "请尽快完成支付！",
      payArr: [
        { id: 1, icon: "icon_pay_weixin", name: "微信支付", value: "weixin" },
        {
          id: 2,
          icon: "icon_pay_alipay",
          name: "支付宝支付",
          value: "zhifubao"
        },
        // { id: 3, icon: "icon_pay_yue", name: "余额支付", value: "yue" }
      ],
      timer: "",
      time: 0,
    };
  },
  created() {
    if (this.$route.params.id !== undefined) {
      this.order_id = this.$route.params.id;
    }
    if (this.$route.query.type) {
      this.orderType = this.$route.query.type;
    } else {
      this.orderType = "";
    }
  },
  mounted() {
    this.getOrderDetail();
  },
  methods: {
    getOrderDetail() {
      const id = this.order_id;
      if (!id) return this.$dialog.error("订单不存在");
      orderDetail(id)
        .then(res => {
          this.orderInfo = res.data;
          (this.pay_price = res.data.pay_price),
            (this.pay_type = res.data.pay_type),
            (this.pay_tips = res.data._status._msg);
          if (this.orderType) {
            this.payOrderHandle(this.pay_type);
          } else {
            this.payOrder();
          }
        })
        .catch(err => {
          this.$dialog.error(err.msg);
          this.$router.go(-1);
        });
    },
    // 直接支付
    payOrder() {
      if (this.pay_type === "weixin") {
        let jsConfig = this.$route.query.jsConfig;
        this.creatQrCode(jsConfig, this.$refs["payQrcode"], 280, 280);
        this.heartBeat()
      } else if (this.pay_type === "zhifubao") {
        this.$refs["aliPayBox"].innerHTML = res.data.result.jsConfig;
        document.forms["alipaysubmit"].submit();
        this.heartBeat()
      }
    },
    // 切换支付
    payOrderHandle(type) {
      this.$refs["payQrcode"].innerHTML = ''
      this.pay_type = type;
      let { from, order_id } = this;
      payOrder(order_id, type, from)
        .then(res => {
          const data = res.data;
          let url = "/orderDetails/" + data.result.orderId;
          switch (data.status) {
            case "ORDER_EXIST":
            case "EXTEND_ORDER":
            case "PAY_DEFICIENCY":
            case "WECHAT_PC_PAY":
              // 微信PC支付
              this.creatQrCode(
                res.data.result.jsConfig,
                this.$refs["payQrcode"],
                280,
                280
              );
              this.heartBeat()
              break;
            case "ALI_PC_PAY":
              // 支付宝PC支付
              this.$refs["aliPayBox"].innerHTML = res.data.result.jsConfig;
              this.heartBeat()
              setTimeout(()=>{
                document.forms["alipaysubmit"].submit();
              }, 2000)
              break;
            case "PAY_ERROR":
              this.$dialog.toast({ mes: res.msg });
              this.$router.replace({
                path: url
              });
              break;
            case "SUCCESS":
              this.$dialog.success(res.msg);
              this.$router.replace({
                path: url
              });
          }
        })
        .catch(err => {
          this.$dialog.loading.close();
          this.$dialog.toast({ mes: err.msg || "订单支付失败" });
        });
    },
    // 生成二维码
    creatQrCode(text, dom, w = 100, h = 100) {
      this.qrcode = new QRCode(dom, {
        text: text, // 需要转换为二维码的内容
        width: w,
        height: h,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    },
    // 检测支付是否成功
    heartBeat() {
      this.timer&&clearInterval(this.timer)
      this.timer = setInterval(() => {
        if (this.time > 200) {
          this.timer&&clearInterval(this.timer)
          this.$router.replace('/order')
          return null
        }
        this.time++
        this.getOrderPayState()
      }, 3000);
    },
    getOrderPayState() {
      orderPayState(this.order_id).then(res => {
        if (res.data.paid == 1) {
          this.timer && clearInterval(this.timer);
          this.$dialog.confirm({
            title: "温馨提示",
            mes: "订单支付成功！",
            opts: [
              {
                txt: "继续购物",
                color: false,
                callback: () => {
                  this.$router.replace('/category')
                }
              },
              {
                txt: "查看订单",
                color: true,
                callback: () => {
                  this.$router.replace('/order')
                }
              }
            ]
          });
        }
      });
    }
  }
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #DA213D;
.pay-order {
  width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 100px;
  .pay {
    width: 1200px;
    margin: 0 auto;
    background: #fff2fb;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > div:nth-of-type(1) {
      padding-left: 30px;
      color: #014a97;
      font-size: 18px;
    }
    .order-num {
      color: #666;
      font-size: 14px;
      padding-top: 10px;
    }
    > div:nth-of-type(2) {
      padding-right: 22px;
      display: flex;
      height: 31px;
      align-items: center;
      > div:nth-of-type(1) {
        color: #666666;
        font-size: 16px;
      }
      > div:nth-of-type(2) {
        color: $color;
        font-size: 24px;
        padding-left: 24px;
      }
    }
  }
  .pay-try {
    width: 100%;
    height: 599px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    margin: 29px 0 16px 0;

    .ty {
      background: $color;
      width: 154px;
      height: 53px;
      line-height: 53px;
      text-align: center;
      color: #014a97;
      font-size: 16px;
      display: inline-block;
      margin-top: 29px;
      position: absolute;
      margin-left: -4px;
    }
    .san {
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: rgba(151, 25, 118, 1);
      margin-left: -4px;
      margin-top: 25px;
    }
    .qrcode {
      position: absolute;
      height: 460px;
      margin: 110px 0 0 250px;
    }
    .zfb {
      width: 795px;
      height: 495px;
      display: flex;
      padding: 62px 0 0 226px;
    }
    .weixin {
      .le {
        .tit {
          color: #e83323;
          font-size: 16px;
          padding: 65px 0 0 230px;
        }
        .pay-detail {
          display: flex;
          align-items: center;
          margin: 0 0 0 226px;
          .pay-left {
            margin-right: 30px;
            .pay-qrcode {
              width: 300px;
              height: 300px;
              box-sizing: border-box;
              border: solid #eee 1px;
              padding: 10px;
            }
            .pay-tips {
              margin-top: 20px;
              height: 70px;
              width: 300px;
              background-color: rgb(251, 120, 122);
              img {
                height: 40px;
                width: 40px;
                margin-right: 20px;
              }
              div {
                height: 50px;
              }
              span {
                font-size: 14px;
                color: #fff;
              }
            }
          }
          .pay-right {
            height: 460px;
          }
        }
      }
    }
    .zhifubao{
      .pay-tips{
        background-color: #0084d7 !important;
      }
    }
  }
  .try {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    padding: 20px 0;
    > div:nth-of-type(1) {
      color: #999999;
      font-size: 15px;
      padding-left: 39px;
      margin-right: 20px;
    }
    .pay-item {
      min-width: 160px;
      padding: 10px;
      height: 30px;
      margin-right: 20px;
      border: solid #eee 1px;
      border-radius: 2px;
      cursor: pointer;
      img {
        display: block;
        width: 25px;
        height: 25px;
      }
      span {
        font-size: 16px;
        padding-left: 8px;
        color: #666;
      }
    }
    .pay-item:hover {
      border-color: $color;
    }
  }
}
.alipay-box {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  // background-color: #DA213D;
}
.pay-wait-box{
  background-color: #e7e7e7;
}
.pay-wait{
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  object-fit: contain;
  animation: rotateAimate infinite 2s;
}
@keyframes rotateAimate
{
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}
.pay-wait-text{
  font-size: 14px;
  color: #DA213D;
}
</style>
